<template>
    <div class="popup">
        <audio ref="audio" autoplay src="@/assets/suoguodeyanhuo.mp3"></audio>
        <div class="popup-top">
            <van-icon name="arrow-left" @click="ctrlShow" />
            <span>文章列表</span>
        </div>
        <h2 style="margin-left: 20px; margin-top: 60px;">{{ detailList.title }}</h2>
        <div class="popup-user">
            <img :src="detailList.avatar" alt="">
            <div class="left">
                <p>{{ detailList.nickname }}</p>
                <span>{{ timer }}</span>
            </div>
            <van-button class="valBtn" type="default">+ 已关注</van-button>
        </div>
        <div class="popup-container">
            <p>{{ detailList.content }}</p>
            <img :src="item" v-for="item in detailList.imageSrc" :key="item.id" alt="">
            <CommentList />
            <containerButtom />
        </div>
    </div>
</template>

<script>
import { getContainer } from '../../request/api/home.js'
import timer from '../../utils/derevion.js'
import containerButtom from '@/components/Home/containerButtom.vue'
import CommentList from '@/components/Home/CommentList.vue'
export default {
    name: 'HomeContainer',
    data() {
        return {
            show: false,
            detailList: [],
            timer: '',
            updateView: false,
        }
    },
    props: ['detailId'],
    components: {
        containerButtom,
        CommentList
    },
    methods: {
        ctrlShow() {
            this.$emit('checkShow', this.show);
        },
    },
    async created() {
        let res = await getContainer(this.detailId);
        this.detailList = res.data.data;
        this.timer = timer(res.data.data.time);
    }
}
</script>

<style lang="less" scoped>
.popup {
    width: 100%;
    position: relative;

    .popup-top {
        background-color: rgb(7, 193, 96);
        width: 100%;
        height: 50px;
        line-height: 50px;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;

        span {
            margin-left: 36%;
        }
    }

    .popup-user {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;

        img {
            width: 50px;
            height: 50px;
            background: skyblue;
            border-radius: 50%;
            margin-left: 10px;
        }

        .left {
            height: 100%;
            margin-left: 20px;

            p {
                line-height: 0;
                width: 180px;
            }

            span {
                font-size: 14px;
                color: #999;
            }
        }

        .valBtn {
            width: 100px;
            height: 30px;
            border-radius: 15px;
        }
    }

    .popup-container {
        width: 100%;
        position: absolute;
        overflow: scroll;
        height: 70vh;

        p {
            width: 93%;
            word-break: break-all;
            word-wrap: break-word;
            line-height: 25px;
            padding-left: 10px;
            overflow: scroll;
        }

        img {
            width: 200px;
            max-height: 300px;
            margin: 30px 5px 5px 5px;
        }
    }
}
</style>